<template>
	<view class="selectChain">
		<HeaderBar title="请选择钱包网络" fixed showBack backgroundColor="#F6F6F6" />
		<view class="chainList">
			<view class="chainItem" v-for="(item,index) in allchains" :key="index" @tap="createTilp(item)">
				<view class="icon-box">
					<image :src="'/static/images/chain/'+item.chainName+'.png'" mode="" class="icon"></image>
				</view>
				<view class="title">
					<view class="name">
						{{item.chainName}}
					</view>
					<view class="right-box">
						<image src="/static/images/login/right.png" mode="" class="icon"></image>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "",
				config: {}
			}
		},
		computed: {
			allchains() {
				return this.$store.getters.getAllchains;
			},
		},
		onLoad(options) {
			const configStr = options.configStr || '';
			try {
				// 解码并反序列化 JSON 字符串
				const config = JSON.parse(decodeURIComponent(configStr));
				this.config = config
			} catch (error) {}
		},
		methods: {
			createTilp(item) {
				this.config.chainId = item.chainId + ""
				this.config.chainType = item.chainType
				this.config.chainName = item.chainName
				const configStr = encodeURIComponent(JSON.stringify(this.config));
				if (this.config.importMethod == 1) {
					uni.navigateTo({
						url: `/pages/importType/importType?configStr=${configStr}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/createTilp/createTilp?configStr=${configStr}`
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.selectChain {
		.chainList {
			padding: 0 32upx;

			.chainItem {
				height: 124upx;
				margin-top: 8upx;
				padding: 0 34upx;
				background: #FAFBFD;
				display: flex;
				align-items: center;
				border-radius: 14upx;

				.icon-box {
					display: flex;
					margin-right: 16upx;

					.icon {
						width: 68upx;
						height: 68upx;
					}
				}

				.title {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.right-box {
						display: flex;

						.icon {
							width: 20upx;
							height: 20upx;
						}
					}
				}
			}
		}
	}
</style>